﻿<Page 
  x:Class="Milkify.Views.LoadingControl"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Home">
  <Page.Resources>
    <Storyboard x:Key="loadingAnimation">
      <DoubleAnimation
        Storyboard.TargetName="loadIcon"
        Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)"
        Duration="0:0:1"
        From="0"
        To="360"
        RepeatBehavior="Forever" />
    </Storyboard>
  </Page.Resources>
  <Page.Triggers>
    <EventTrigger RoutedEvent="Page.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard Storyboard="{StaticResource loadingAnimation}" />
      </EventTrigger.Actions>
    </EventTrigger>
  </Page.Triggers>
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Canvas Name="loadIcon" Width="40" Height="40" Background="Transparent">
      <Canvas.RenderTransform>
        <RotateTransform
          Angle="0"
          CenterX="20"
          CenterY="20" />
      </Canvas.RenderTransform>
      <Ellipse Width="20" Height="20" Canvas.Left="10" Canvas.Top="0">
        <Ellipse.Fill>
          <RadialGradientBrush>
            <GradientStop Color="Black" Offset="0" />
            <GradientStop Color="Black" Offset="0.5" />
            <GradientStop Color="Transparent" Offset="1" />
          </RadialGradientBrush>
        </Ellipse.Fill>
      </Ellipse>
      <Ellipse Width="20" Height="20" Canvas.Left="2" Canvas.Top="15">
        <Ellipse.Fill>
          <RadialGradientBrush>
            <GradientStop Color="Black" Offset="0" />
            <GradientStop Color="Black" Offset="0.5" />
            <GradientStop Color="Transparent" Offset="1" />
          </RadialGradientBrush>
        </Ellipse.Fill>
      </Ellipse>
      <Ellipse Width="20" Height="20" Canvas.Left="18" Canvas.Top="15">
        <Ellipse.Fill>
          <RadialGradientBrush>
            <GradientStop Color="Black" Offset="0" />
            <GradientStop Color="Black" Offset="0.5" />
            <GradientStop Color="Transparent" Offset="1" />
          </RadialGradientBrush>
        </Ellipse.Fill>
      </Ellipse>
    </Canvas>
    <TextBlock 
      Grid.Row="1" 
      HorizontalAlignment="Center"
      Style="{DynamicResource HeadingTextStyle1}">Loading...</TextBlock>
  </Grid>
</Page>
